<template>
  <view class="content">
    <view class="order-item">
      <u--form labelPosition="left" :model="model" ref="form1">
        <u-form-item label="您的生辰:" labelWidth="80px" prop="bg001" borderBottom ref="item1">
          <!-- <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeBazi" :clearIcon="false" /> -->
          <yu-datetime-picker @confirm="onConfirm" startYear="1900" ref="dateTime" value="1990-01-10 08:30:01"
            :isAll="true" :current="false"></yu-datetime-picker>
          <u-input v-model="datetimesingle" readonly border="none" inputAlign="center">
            <template slot="suffix">
              <u-button @click="toggleTab" type="success" size="mini">选择</u-button>
            </template>
          </u-input>
        </u-form-item>
        <u-form-item label="您的八字:" labelWidth="80px" prop="bg001">
          <u--text :text=bazi></u--text>
        </u-form-item>
        <u-form-item label="天干五星:" labelWidth="80px" prop="bg001">
          <u--text :text=tianganWuxing></u--text>
        </u-form-item>
        <u-form-item label="地支五星:" labelWidth="80px" prop="bg001">
          <u--text :text=dizhiWuxing></u--text>
        </u-form-item>
        <view class="parent">
          <view class="div1">木</view>
          <view class="div2">火</view>
          <view class="div3">土</view>
          <view class="div4">金</view>
          <view class="div5">水</view>
        </view>
        <view class="parent">
          <view class="div1">{{ mu }}</view>
          <view class="div2">{{ huo }}</view>
          <view class="div3">{{ tu }}</view>
          <view class="div4">{{ jin }}</view>
          <view class="div5">{{ shui }}</view>
        </view>
        <u-form-item label="五行缺啥:" labelWidth="80px" prop="bg001">
          <u--text :text=que></u--text>
        </u-form-item>
        <view class="parent">
          <view class="div1">天干</view>
          <view class="div2">生(我生)</view>
          <view class="div3">克(我克)</view>
          <view class="div4">泄(生我)</view>
          <view class="div5">耗(克我)</view>
        </view>
        <view class="parent">
          <view class="div1">相生相克</view>
          <view class="div2">{{ sheng }}</view>
          <view class="div3">{{ ke }}</view>
          <view class="div4">{{ xie }}</view>
          <view class="div5">{{ hao }}</view>
        </view>
        <view class="parent">
          <view class="div1">地支</view>
          <view class="div2">生(我生)</view>
          <view class="div3">克(我克)</view>
          <view class="div4">泄(生我)</view>
          <view class="div5">耗(克我)</view>
        </view>
        <view class="parent">
          <view class="div1">相生相克</view>
          <view class="div2">{{ sheng1 }}</view>
          <view class="div3">{{ ke1 }}</view>
          <view class="div4">{{ xie1 }}</view>
          <view class="div5">{{ hao1 }}</view>
        </view>
        <view>
          五行相生：金生水，水生木，木生火，火生土，土生金
          <br />
          五行相克：金克木，木克土，土克水，水克火，火克金
        </view>
      </u--form>

    </view>
  </view>
</template>

<script>
  import Calendar from "@/components/Fo-Calendar/Fo-Calendar.vue";
  import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue";
  import { LunarHour, SolarTime,Element } from "tyme4ts";
  export default {
    components: {
      Calendar,
      yuDatetimePicker,
    },
    data() {
      return {
        datetimesingle: "",
        model: {},
        bazi: "",
        tianganWuxing: "",
        dizhiWuxing: "",
        mu: 0,
        huo: 0,
        tu: 0,
        jin: 0,
        shui: 0,
        que: "",
        xiangsheng: "",
        beike: "",
        sheng: "",
        ke: "",
        xie: "",
        hao: "",
        sheng1: "",
        ke1: "",
        xie1: "",
        hao1: ""
      };
    },
    watch: {
      datetimesingle(newval) {
        console.log("单选:", this.datetimesingle);
      },
    },
    created() { },
    onLoad() { },
    methods: {
      toggleTab(item, index) {
        this.$refs.dateTime.show();
      },
      onConfirm(e) {
        /*       var time = new Date(e);
              let Y = time.getFullYear(), // 年
                M = time.getMonth() + 1, // 月
                D = time.getDate(), // 日
                h = time.getHours(), // 时
                m = time.getMinutes(), // 分
                s = time.getSeconds(); // 秒 */
        this.datetimesingle = e.selectRes
        var time = new Date(e.selectRes);
        let Y = time.getFullYear(), // 年
          M = time.getMonth() + 1, // 月
          D = time.getDate(), // 日
          h = time.getHours(), // 时
          m = time.getMinutes(), // 分
          s = time.getSeconds();
        //console.log("--sss--",Y, M, D, h, m, s);
        //公历转农历
        var solarTime = SolarTime.fromYmdHms(Y, M, D, h, m, s);
        var lunarHour = solarTime.getLunarHour();
        //农历的年月日时分秒
        let Y1 = lunarHour.getYear(), // 年
          M1 = lunarHour.getMonth(), // 月
          D1 = lunarHour.getDay(), // 日
          h1 = lunarHour.getHour(), // 时
          m1 = lunarHour.getMinute(), // 分
          s1 = lunarHour.getSecond(); // 秒
        var eightChar = LunarHour.fromYmdHms(Y1, M1, D1, h1, m1, s1).getEightChar();
        this.bazi = eightChar.toString();
        //console.log("--sss--",this.bazi);
        var wuxing = this.getWuXing(this.bazi)
        this.tianganWuxing = wuxing.tianganWuxing.join(" ")
        this.dizhiWuxing = wuxing.dizhiWuxing.join(" ")

        //五行计算
        var str = this.tianganWuxing + " " + this.dizhiWuxing
        this.mu = this.countCharacterRegex(str, "木");
        this.huo = this.countCharacterRegex(str, "火");
        this.tu = this.countCharacterRegex(str, "土");
        this.jin = this.countCharacterRegex(str, "金");
        this.shui = this.countCharacterRegex(str, "水");

        var que = ""
        if (this.mu == 0) {
          que += ",缺木"
        }
        if (this.huo == 0) {
          que += ",缺火"
        }
        if (this.tu == 0) {
          que += ",缺土"
        }
        if (this.jin == 0) {
          que += ",缺金"
        }
        if (this.shui == 0) {
          que += ",缺水"
        }
        if (que.length > 0) {
          this.que = "您五行缺失" + que
        }
        else {
          this.que = "啥都不缺"
        }

        var tian = this.findMostFrequentChars(this.tianganWuxing)
        var di = this.findMostFrequentChars(this.dizhiWuxing)
        if(tian.length == 1) {
          var me = Element.fromName(tian[0]);
          this.sheng = me.getReinforce();
          this.ke = me.getRestrain();
          this.xie = me.getReinforced();
          this.hao = me.getRestrained();
        }
        if(di.length == 1) {
          var me1 = Element.fromName(di[0]);
          this.sheng1 = me1.getReinforce();
          this.ke1 = me1.getRestrain();
          this.xie1 = me1.getReinforced();
          this.hao1 = me1.getRestrained();
        }
        console.log(tian, di)
      },
      countCharacterRegex(str, char) {
        // 使用正则表达式匹配字符，并设置全局标志g  
        const regex = new RegExp(char, 'g');
        // 使用match方法查找所有匹配项  
        // 注意：如果没有找到匹配项，match会返回null，所以我们需要处理这种情况  
        const matches = str.match(regex) || [];
        // 返回匹配项数组的长度  
        return matches.length;
      },
      //五行
      getWuXing(bazi) {
        var baziList = bazi.split(" ")
        //天干 | 五行
        //甲乙 | 木 ; 丙丁 | 火 ;戊己 | 土;庚辛 | 金;壬癸 | 水;
        //地支 | 五行
        //子亥 | 水;寅卯 | 木;巳午 | 火;申酉 | 金;辰戌丑未 | 土;
        var data = {}
        data.tianganWuxing = []
        data.dizhiWuxing = []
        baziList.forEach(item => {
          if ("甲乙".includes(item[0])) {
            data.tianganWuxing.push("木")
          }
          else if ("丙丁".includes(item[0])) {
            data.tianganWuxing.push("火")
          }
          else if ("戊己".includes(item[0])) {
            data.tianganWuxing.push("土")
          }
          else if ("庚辛".includes(item[0])) {
            data.tianganWuxing.push("金")
          }
          else if ("壬癸".includes(item[0])) {
            data.tianganWuxing.push("水")
          }

          if ("子亥".includes(item[1])) {
            data.dizhiWuxing.push("水")
          }
          else if ("寅卯".includes(item[1])) {
            data.dizhiWuxing.push("木")
          }
          else if ("巳午".includes(item[1])) {
            data.dizhiWuxing.push("火")
          }
          else if ("申酉".includes(item[1])) {
            data.dizhiWuxing.push("金")
          }
          else if ("辰戌丑未".includes(item[1])) {
            data.dizhiWuxing.push("土")
          }
        });
        //data.tianganWuxing

        return data;
      },
      //计算字符串哪个字出现的最多
      findMostFrequentChars(str) {
        const charCount = {};
        let maxCount = 0;
        let mostFrequentChars = [];

        // 遍历字符串中的每个字符  
        for (let char of str) {
          // 忽略空白字符  
          if (/\s/.test(char)) continue; // \s 匹配任何空白字符  

          if (charCount[char]) {
            charCount[char]++;
          } else {
            charCount[char] = 1;
          }

          // 检查当前字符的计数是否更新了最大出现次数  
          if (charCount[char] > maxCount) {
            maxCount = charCount[char];
            // 重置数组，只包含当前字符  
            mostFrequentChars = [char];
          } else if (charCount[char] === maxCount) {
            // 如果次数相同，则添加到数组中  
            mostFrequentChars.push(char);
          }
        }

        // 如果没有字符（或所有字符都是空白字符），则返回空数组  
        if (mostFrequentChars.length === 0) {
          return []; // 或者返回 null，取决于你的需求  
        }

        return mostFrequentChars;
      }
    },
  };
  const {
    Solar,
    SolarMonth,
    Lunar,
    HolidayUtil,
    Foto,
  } = require("@/common/lunar.js");
</script>

<style lang="scss">
  .parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    text-align: center;
  }

  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }

  .div2 {
    grid-area: 1 / 2 / 2 / 3;
  }

  .div3 {
    grid-area: 1 / 3 / 2 / 4;
  }

  .div4 {
    grid-area: 1 / 4 / 2 / 5;
  }

  .div5 {
    grid-area: 1 / 5 / 2 / 6;
  }
</style>